import VipPopup from '@/components/VipPopup/VipPopup';
import { getHomeData } from '@/servers/api/collection';
import { MoreOutlined } from '@ant-design/icons';
import {
    FormattedMessage,
    getLocale,
    history,
    useIntl,
    useModel,
} from '@umijs/max';
import {
    Alert,
    Button,
    Card,
    Cascader,
    Col,
    Form,
    Row,
    Select,
    Space,
    Table,
    Typography,
    message,
} from 'antd';
import { useEffect, useState } from 'react';
import Marquee from 'react-fast-marquee';
import './index.less';
import ImBtn from '@/components/Im/ImBtn';

const HomePage: React.FC = () => {
    const intl = useIntl();
    const { createC2CConversation } = useModel('useTencentIm');
    const [form] = Form.useForm();
    const { bannerText, getBannerText } = useModel('global');
    //导航图片
    const { initialState } = useModel('@@initialState');
    const { auth } = initialState as IGlobal.IInitialState;
    const { cityOptions } = useModel('global');
    //banner
    const [swiper, setSwiper] = useState([]);
    const lang = getLocale();
    function details(row: any) {
        history.push('/detail', {
            id: row.id,
            type: form.getFieldValue('type'),
            releaseType: 'goods',
        });
    }
    const [dataSource, setdataSource] = useState([]); //表格
    const columns = [
        {
            title: <FormattedMessage id="货物名称"></FormattedMessage>,
            key: 'name',
            render: (text: string, record) => (
                <>{record[intl.formatMessage({ id: 'item.name' })]}</>
            ),
        },
        {
            title: <FormattedMessage id="发布人"></FormattedMessage>,
            key: 'id',
            render: (text: string, record) => (
                <>{record.user[intl.formatMessage({ id: 'item.username' })]}</>
            ),
        },
        {
            title: <FormattedMessage id="数量"></FormattedMessage>,
            key: 'goods_num',
            render: (text: string, record) => (
                <>
                    {record[intl.formatMessage({ id: 'item.goods_num' })]}
                    {record[intl.formatMessage({ id: 'item.number_unit' })]}
                </>
            ),
        },
        {
            title: <FormattedMessage id="期望单价"></FormattedMessage>,
            key: 'price_unit',
            render: (text: string, record) => (
                <>
                    {record['desire_price']}
                    <FormattedMessage id={record.price_unit}></FormattedMessage>
                    &nbsp;/&nbsp;
                    {record[intl.formatMessage({ id: 'item.number_unit' })]}
                </>
            ),
        },
        {
            title: <FormattedMessage id="期望速度"></FormattedMessage>,
            dataIndex: 'desire_speed',
            key: 'desire_speed',
        },
        {
            title: <FormattedMessage id="操作"></FormattedMessage>,
            key: 'action',
            render: (text: string, record) => (
                <Space size="middle">
                    <Button
                        type="primary"
                        ghost
                        size="small"
                        onClick={() => {
                            details(record);
                        }}
                    >
                        <FormattedMessage id="查看详情"></FormattedMessage>
                    </Button>
                    <ImBtn toMobile={record.user.mobile}></ImBtn>
                </Space>
            ),
        },
    ];
    const [tableparams, settableparams] = useState({
        pageNum: 1,
        pageSize: 10,
        searchKey: '',
        city: [],
        type: 1,
    });

    const [vipShow, setvipShow] = useState(false);
    const [isVipShowJb, setisVipShowJb] = useState(false); // 用户是否有查看竞标信息权限
    useEffect(() => {
        if (auth !== null) {
            if (auth.auth === 'all') {
                setisVipShowJb(true);
            } else {
                if (auth.level > 0) {
                    if (auth.auth.indexOf('look_tenders') !== -1) {
                        // 非会员不能查看
                        setisVipShowJb(true);
                    }
                }
            }
        }
    }, [auth]);
    function getDataList(params: any) {
        const qParams = {
            ...params,
        };
        delete qParams.city;
        if (params.city && params.city.length > 0) {
            qParams.city = params.city[params.city.length - 1];
        }
        getHomeData({
            ...qParams,
        }).then((res) => {
            settableparams(params); // 参数
            setSwiper(res.data.banners);
            setdataSource(res.data.list);
        });
    }
    useEffect(() => {
        getDataList(tableparams);
        getBannerText();
    }, []);

    function more() {
        if (form.getFieldValue('type') === 1) {
            history.push('/releaseManage/defaultRelease/goodsPromotion');
        } else {
            history.push('/releaseManage/compRelease/goodsPromotion');
        }
    }
    return (
        <div>
            <VipPopup
                vipShow={vipShow}
                onChange={() => {
                    setvipShow(false);
                }}
            />
            <Alert
                banner
                message={
                    <Marquee pauseOnHover gradient={false}>
                        {bannerText.map((item: string, index: number) => (
                            <div key={index} style={{ marginRight: 500 }}>
                                {' '}
                                {item}
                            </div>
                        ))}
                    </Marquee>
                }
            />
            {/* <Row gutter={30} className="nav-box">
                <Col span={12}>
                    <Card>
                        <Typography.Title
                            level={4}
                            style={{ textAlign: 'center' }}
                        >
                            <FormattedMessage id="商家推广"></FormattedMessage>
                        </Typography.Title>
                        <Row>
                            {iconList['1'] &&
                                iconList['1'].map((item) => (
                                    <Col key={item.id} span={3}>
                                        <img
                                            onClick={() => {
                                                districtTo(item.auth);
                                            }}
                                            src={
                                                lang === 'zh-CN'
                                                    ? CONFIG.IMAGE_URL +
                                                      item.image
                                                    : CONFIG.IMAGE_URL +
                                                      item.image_ru
                                            }
                                        ></img>
                                    </Col>
                                ))}
                        </Row>
                    </Card>
                </Col>
                <Col span={12}>
                    <Card>
                        <Typography.Title
                            level={4}
                            style={{ textAlign: 'center' }}
                        >
                            <FormattedMessage id="参与竞标"></FormattedMessage>
                        </Typography.Title>
                        <Row>
                            {iconList['2'] &&
                                iconList['2'].map((item) => (
                                    <Col key={item.id} span={3}>
                                        <img
                                            onClick={() => {
                                                districtTo(item.auth);
                                            }}
                                            src={
                                                lang === 'zh-CN'
                                                    ? CONFIG.IMAGE_URL +
                                                      item.image
                                                    : CONFIG.IMAGE_URL +
                                                      item.image_ru
                                            }
                                        ></img>
                                    </Col>
                                ))}
                        </Row>
                    </Card>
                </Col>
            </Row> */}
            {/* <Carousel autoplay>
                {swiper &&
                    swiper.map((item) => (
                        <img key={item} src={CONFIG.IMAGE_URL + item}></img>
                    ))}
            </Carousel> */}
            <Card>
                <Typography.Title
                    level={4}
                    style={{ display: 'flex', justifyContent: 'space-between' }}
                >
                    {form.getFieldValue('type') === 1 ? (
                        <FormattedMessage id="推广信息"></FormattedMessage>
                    ) : (
                        <FormattedMessage id="竞标信息"></FormattedMessage>
                    )}

                    <Typography.Link
                        style={{ fontWeight: 'normal' }}
                        onClick={() => {
                            more();
                        }}
                    >
                        <FormattedMessage id="查看更多"></FormattedMessage>
                        <MoreOutlined />
                    </Typography.Link>
                </Typography.Title>

                <Form
                    colon={false}
                    form={form}
                    onFinish={(params) =>
                        getDataList({
                            ...tableparams,
                            ...params,
                            pageNum: 1,
                            pageSize: 10,
                        })
                    }
                    autoComplete="off"
                >
                    <Row gutter={15}>
                        <Col span={5}>
                            <Form.Item
                                label={
                                    <FormattedMessage id="类型"></FormattedMessage>
                                }
                                name="type"
                                initialValue={1}
                            >
                                <Select
                                    options={[
                                        {
                                            value: 1,
                                            label: (
                                                <FormattedMessage id="推广信息"></FormattedMessage>
                                            ),
                                        },
                                        {
                                            value: 2,
                                            label: (
                                                <FormattedMessage id="竞标信息"></FormattedMessage>
                                            ),
                                        },
                                    ]}
                                />
                            </Form.Item>
                        </Col>
                        <Col span={5}>
                            <Form.Item
                                label={
                                    <FormattedMessage id="地区"></FormattedMessage>
                                }
                                name="city"
                            >
                                <Cascader
                                    options={cityOptions}
                                    fieldNames={{ value: 'label' }}
                                    changeOnSelect
                                />
                            </Form.Item>
                        </Col>
                        <Col span={4}>
                            <Form.Item>
                                <Space>
                                    <Button htmlType="submit" type="primary">
                                        <FormattedMessage id="搜索"></FormattedMessage>
                                    </Button>
                                    <Button
                                        htmlType="reset"
                                        onClick={() => {
                                            getDataList({
                                                pageNum: 1,
                                                pageSize: 10,
                                            });
                                        }}
                                    >
                                        <FormattedMessage id="重置"></FormattedMessage>
                                    </Button>
                                </Space>
                            </Form.Item>
                        </Col>
                    </Row>
                </Form>
                <Table dataSource={dataSource} rowKey="id" columns={columns} />
            </Card>
        </div>
    );
};

export default HomePage;
